<template>
  <div class="json-editor">
    <el-input
      v-model="localValue"
      type="textarea"
      :rows="rows"
      :placeholder="placeholder"
      @input="handleInput"
      @blur="handleBlur"
      class="json-textarea">
    </el-input>

    <div v-if="error" class="error-message">
      <el-text type="danger" size="small">
        <el-icon><Warning /></el-icon>
        {{ error }}
      </el-text>
    </div>

    <div class="json-actions">
      <el-button size="small" @click="formatJson">格式化</el-button>
      <el-button size="small" @click="validateJson">验证</el-button>
      <el-button size="small" @click="clearJson">清空</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: String,
    default: '{}'
  },
  height: {
    type: Number,
    default: 200
  },
  placeholder: {
    type: String,
    default: '请输入JSON配置'
  }
})

const emit = defineEmits(['update:modelValue'])

// 状态
const localValue = ref(props.modelValue)
const error = ref('')

// 计算属性
const rows = computed(() => Math.max(6, Math.floor(props.height / 24)))

// 监听props变化
watch(() => props.modelValue, (newValue) => {
  if (newValue !== localValue.value) {
    localValue.value = newValue
    validateJsonContent(newValue)
  }
}, { immediate: true })

// 输入处理
const handleInput = (value) => {
  localValue.value = value
  emit('update:modelValue', value)
  error.value = '' // 清除错误
}

// 失焦验证
const handleBlur = () => {
  validateJsonContent(localValue.value)
}

// 验证JSON格式
const validateJsonContent = (value) => {
  if (!value || value.trim() === '') {
    error.value = ''
    return true
  }

  try {
    JSON.parse(value)
    error.value = ''
    return true
  } catch (e) {
    error.value = `JSON格式错误: ${e.message}`
    return false
  }
}

// 格式化JSON
const formatJson = () => {
  try {
    const parsed = JSON.parse(localValue.value)
    const formatted = JSON.stringify(parsed, null, 2)
    localValue.value = formatted
    emit('update:modelValue', formatted)
    error.value = ''
    ElMessage.success('JSON格式化成功')
  } catch (e) {
    error.value = `JSON格式错误: ${e.message}`
    ElMessage.error('JSON格式错误，无法格式化')
  }
}

// 验证JSON
const validateJson = () => {
  if (validateJsonContent(localValue.value)) {
    ElMessage.success('JSON格式正确')
  } else {
    ElMessage.error('JSON格式错误')
  }
}

// 清空内容
const clearJson = () => {
  localValue.value = '{}'
  emit('update:modelValue', '{}')
  error.value = ''
}
</script>

<style lang="scss" scoped>
.json-editor {
  .json-textarea {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;

    :deep(.el-textarea__inner) {
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      line-height: 1.5;
    }
  }

  .error-message {
    margin-top: 8px;
    padding: 4px 8px;
    background-color: #fef0f0;
    border: 1px solid #fde2e2;
    border-radius: 4px;
  }

  .json-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
  }
}
</style>